/**
 * Created by mapbar_front on 2018/3/14.
 */

import React,{ Component } from 'react';
import { Form, Icon, Input, Button,InputNumber } from 'antd';
const FormItem = Form.Item;

//水平登录栏，常用在顶部导航栏中
class FormItems extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    componentDidMount() {
        //this.props.form.validateFields();
    }
    /**
     *
     * onSubmitEvent() 提交
     */
    onSubmitEvent(e) {
        e.preventDefault();
        console.log("提交");
        this.props.form.validateFields((err,value)=>{
            if(!err) {
                console.log('values',value);
            }
        });
    }
    // userNameChange(value) {
    //     console.log('姓名的值为：',value);
    // }
    // passwordChange(value) {
    //     console.log('密码的值为：',value);
    // }

    //校验整数
    checkNumber(rule, value, callback) {
        const form = this.props.form;
        let regInt = /^$|^-?\d+$/;
        if (!regInt.test(value)) {
            callback("请输入整数");
        } else {
            callback();
        }
    }
    //校验电话号码
    checkPhone(rule, value, callback) {
        const form = this.props.form;
        let fieldMobileReg510 = /^$|^([0-9]{5,10})$/
        let FieldMobileReg11 = /^$|^((11|12|13|14|15|16|17|18)+\d{9})$/
        if (value.length < 11 && fieldMobileReg510.test(value)) {
            callback();
        } else if(value.length === 11 && FieldMobileReg11.test(value)){
            callback();
        }else{
            callback("请您输入5-11号码");
        }
    }
    checkFigure(rule, value, callback) {
        const form = this.props.form;
        let regFigure = /^$|^\d+(\.[0-9]{1,10})?$/;
        if (!regFigure.test(value)) {
            callback("请输入数值");
        } else {
            callback();
        }
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form onSubmit={ this.onSubmitEvent.bind(this)}>
                <FormItem style={{ width: '50%'}}>
                    {
                        getFieldDecorator('userName',{
                            rules: [{ required: true, message: '请输入你的姓名!',max: 30 }],
                        })(
                            <Input prefix={<Icon type="user" style={{ width: '50%',color: 'rgba(0,0,0,0.25)' }} /> }
                                   placeholder="请输入用户名"
                                   //onChange = { this.userNameChange.bind(this) }
                            />
                        )
                    }
                </FormItem>
                <div>

                </div>
                {/* 验证getFieldDecorator中的id一样时，输入的内容会同步，比如上下文中的userName */}
                {/* <FormItem style={{ width: '50%'}}>
                    {
                        getFieldDecorator('userName',{
                            rules: [{ required: false, message: '请输入你的密码!' }],
                        })(
                            <Input prefix={ <Icon type="lock" style={{ width: '50%',color: 'rgba(0,0,0,0.25)'}} />}
                                   placeholder="测试-请输入密码"
                                   //type="password"
                            />
                        )
                    }
                </FormItem> */}
                <FormItem style={{ width: '50%'}}>
                    {
                        getFieldDecorator('password',{
                            rules: [{ required: true, message: '请输入你的密码!' }],
                        })(
                            <Input prefix={ <Icon type="lock" style={{ width: '50%',color: 'rgba(0,0,0,0.25)'}} />}
                                   placeholder="请输入密码"
                                   type="password"
                                   //onChange = { this.passwordChange.bind(this) }
                            />
                        )
                    }
                </FormItem>
                <FormItem style={{ width: '50%'}}>
                    {
                        getFieldDecorator('email',{
                            validateTrigger: [ 'onBlur'],
                            rules: [{
                                    type: 'email',
                                    message: '请输入正确的邮箱！'
                                },
                                { required: true, message: '请输入你的邮箱!'}
                            ],
                        })(
                            <Input prefix={ <Icon type="lock" style={{ width: '50%',color: 'rgba(0,0,0,0.25)'}} />}
                                   placeholder="请输入邮箱"
                            />
                        )
                    }
                </FormItem>
                <FormItem style={{ width: '50%'}}>
                    {
                        getFieldDecorator('number',{
                            rules: [{
                                    //type: 'integer',
                                    message: '请最多输入10位！',
                                    max: 10,
                                },
                                { required: true, message: '请输入整数!' },
                                { validator: this.checkNumber.bind(this)}
                            ],
                        })(
                            <Input prefix={ <Icon type="lock" style={{ width: '100%',color: 'rgba(0,0,0,0.25)'}} />}
                                   placeholder="请输入整数"
                                   //pattern = '^-?\\d+$'
                            />
                        )
                    }
                </FormItem>
                <FormItem style={{ width: '50%'}}>
                    {
                        getFieldDecorator('iphone',{
                            rules: [{
                                    message: '请输入正确的手机号码！',
                                    max: 11,
                                },
                                { required: true, message: '请输入手机号码!' },
                                //{ validator: this.checkPhone.bind(this) }
                            ],
                        })(
                            <Input prefix={ <Icon type="lock" style={{ width: '50%',color: 'rgba(0,0,0,0.25)'}} />}
                                   placeholder="请输入手机号码"
                                   
                            />
                        )
                    }
                </FormItem>
                <FormItem style={{ width: '50%'}}>
                    {
                        getFieldDecorator('figure',{
                            rules: [
                                {
                                    message: '请输入正确的数字！',
                                    max: 21,
                                },
                                { required: true, message: '请输入数字!' },
                                //{ validator: this.checkFigure.bind(this) }
                            ],
                        })(
                            <Input prefix={ <Icon type="lock" style={{ width: '50%',color: 'rgba(0,0,0,0.25)'}} />}
                                   placeholder="请输入数字"
                                   
                            />
                        )
                    }
                </FormItem>
                <FormItem>
                    <Button
                        type="primary"
                        htmlType="submit"
                    >
                        提交
                    </Button>
                </FormItem>
            </Form>
        )
    }
}
export default Form.create()(FormItems);

